import { useCallback } from 'react';
import { Image } from '@douyinfe/semi-ui';
import { TOOL_BUTTONS, ICON_MAP } from '../constants';
import styles from '../index.module.scss';

/**
 * 工具按钮组件
 * @param {Object} props
 * @param {string} props.selectedTool - 当前选中的工具
 * @param {Function} props.onToolClick - 工具点击处理函数
 */
function ToolButtons({ selectedTool, onToolClick }) {
  const handleToolClick = useCallback((toolKey) => {
    onToolClick(toolKey);
  }, [onToolClick]);

  return (
    <div className={styles.toolbarContainer}>
      {TOOL_BUTTONS.map(tool => {
        const isActive = selectedTool === tool.key;
        const buttonClassName = isActive ? styles.toolButtonActive : styles.toolButton;
        
        return (
          <div
            key={tool.key}
            style={{width:tool.label.length==4?'104px':'75px'}}
            className={buttonClassName}
            onClick={() => handleToolClick(tool.key)}
          >
            <Image
              src={ICON_MAP[tool.icon]}
              preview={false}
              className={styles.uploadIcon}
              draggable={false}
            />
            {tool.label}
          </div>
        );
      })}
    </div>
  );
}

export default ToolButtons;